<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div>
        <button  id="button"  >下载图片</button>
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2Fimg_convert%2Fe4c8acf08dd6f7799b25970e411ed02c.png&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673597446&t=62325a32b434844b659c969a78260d8b">
    </div>
    <script>
        document.getElementById('button').addEventListener('click', function (e) {
            downloadImgByBlob('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2Fimg_convert%2Fe4c8acf08dd6f7799b25970e411ed02c.png&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673597446&t=62325a32b434844b659c969a78260d8b');
        })
        // 第一种方式
        function downloadImgByBlob(url) {
            var img = new Image()
            img.onload = function() {
                var canvas = document.createElement('canvas')
                canvas.width = img.width
                canvas.height = img.height
                var ctx = canvas.getContext('2d')
                // 将img中的内容画到画布上
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
                // 将画布内容转换为Blob
                canvas.toBlob((blob) => {
                    // blob转为同源url
                    var blobUrl = window.URL.createObjectURL(blob)
                    // 创建a链接
                    var a = document.createElement('a')
                    a.href = blobUrl
                    a.download = ''     //文件名称，不填默认为当前请求名称
                    // 触发a链接点击事件，浏览器开始下载文件
                    a.click()
                })
            }
            img.src = url
            // 必须设置，否则canvas中的内容无法转换为blob
            img.setAttribute('crossOrigin', 'Anonymous')
        }
        // 第二种方式
        function downloadImgByBase64(url) {
            var img = new Image()
            img.onload = function() {
                var canvas = document.createElement('canvas')
                canvas.width = img.width
                canvas.height = img.height
                var ctx = canvas.getContext('2d')
                // 将img中的内容画到画布上
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
                // 将画布内容转换为base64
                var base64 = canvas.toDataURL()
                // 创建a链接
                var a = document.createElement('a')
                a.href = base64
                a.download = ''
                // 触发a链接点击事件，浏览器开始下载文件
                a.click()
            }
            img.src = url
            // 必须设置，否则canvas中的内容无法转换为base64
            img.setAttribute('crossOrigin', 'Anonymous')
        }
    </script>

<a href="" download="yy.jpg" id="down">下载图片</a>
<script>
    function getLocalUrl(url) {
        // 图片加载非同步，需要promise包裹
        return new Promise((resolve, reject) => {
            // 创建图片，并将图片属性设置为可跨域
            const img = document.createElement('img')
            // 不设置该属性canvas无法将图片转为base64
            img.setAttribute('crossorigin', 'anonymous')
            img.src = url
            img.onload = function () {
            const canvas = document.createElement('canvas')
            canvas.width = img.width
            canvas.height = img.height
            const ctr = canvas.getContext('2d')
            // 画图
            ctr.drawImage(img, 0, 0, img.width, img.height)
            resolve(canvas.toDataURL())
            }
        })
    }
    const a = document.getElementById('down')
    getLocalUrl(url).then(res => {
        a.href = res
    })
</script>


</body>
</html>